<template>
  <div id="compony">
    <!-- 搜索框 -->
    <van-search
      v-model="search.q"
      placeholder="请输入搜索关键词"
      shape="round"
      background="#ca0131"
      class="search"
      @search="onSearch"
    />
    <!-- 轮播图 -->
    <van-swipe
      :autoplay="3000"
      class="swipe"
      indicator-color="#fff"
      ref="swipe"
      v-show="swipeShow"
    >
      <van-swipe-item v-for="(item, index) in images" :key="index">
        <img v-lazy="item" />
      </van-swipe-item>
    </van-swipe>
    <!-- 推荐筛选区域  粘性布局-->
    <van-sticky :offset-top="50" :class="{ sticky: siftStatus }">
      <van-cell class="template">
        <template #default>
          <span
            class="commend"
            :class="{ active: commendStatus }"
            @click="commend"
            >推荐</span
          >
          <span class="distance" @click="setDistance"
            >距离
            <span class="arrow">
              <i
                class="iconfont iconicon_xuanze_sel rotate"
                :class="{
                  active:
                    distanceStatus === 'asc' && !commendStatus && !scoreStatus
                }"
              ></i>
              <i
                class="iconfont iconicon_xuanze_sel"
                :class="{
                  active:
                    distanceStatus === 'desc' && !commendStatus && !scoreStatus
                }"
              ></i>
            </span>
          </span>
          <span class="star" @click="setScore"
            >评分
            <span class="arrow">
              <i
                class="iconfont iconicon_xuanze_sel rotate"
                :class="{
                  active:
                    scoreStatus === 'asc' && !commendStatus && !distanceStatus
                }"
              ></i>
              <i
                class="iconfont iconicon_xuanze_sel"
                :class="{
                  active:
                    scoreStatus === 'desc' && !commendStatus && !distanceStatus
                }"
              ></i>
            </span>
          </span>
          <span
            class="filter"
            @click="setFilter"
            :class="{ active: siftStatus }"
            >筛选</span
          >
        </template>
      </van-cell>
    </van-sticky>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        class="list"
        ref="list"
      >
        <template v-if="skeletonloading">
          <van-skeleton
            v-for="(item, index) in 5"
            :key="index"
            title
            avatar
            :row="3"
            :loading="skeletonloading"
          />
        </template>
        <template v-else>
          <van-cell
            v-for="(item, index) in companylist"
            :key="index"
            @click="enterCompanyDetail(item)"
          >
            <template #title>
              <div class="icon">
                <van-image
                  class="avatar"
                  lazy-load
                  :src="baseUrl + item.logo"
                  alt=""
                />
              </div>
              <div class="content">
                <h3>{{ item.name }}</h3>
                <p class="address">
                  <span>{{ item.region }}</span>
                  <span>{{ item.distance }}</span>
                </p>
                <p class="people">
                  <span>移动互联网</span><span>{{ item.step }}</span
                  ><span>{{ item.scale }}</span>
                </p>
                <p class="job">
                  在招职位
                  <span style="color:#53b5d1">{{ item.positions }}</span> /
                  最后更新时间:
                  <span>{{ item.updated_at | dateStyleOne }}</span>
                </p>
              </div>
              <div class="score">{{ item.score }}分</div>
            </template>
          </van-cell>
        </template>
      </van-list>
    </van-pull-refresh>
    <!-- 筛选页面 -->
    <sift
      ref="sift"
      @selectDistance="selectDistance"
      :distanceStatus="distanceStatus"
      @selectScore="selectScore"
      @reset="reset"
      :search="search"
    />
  </div>
</template>

<script>
import { apiGetCompanyList } from '@/api/company/company.js'
export default {
  created () {
    // this.getData(this.search)
  },
  components: {
    // 组件的懒加载
    sift: () => import('./com/sift.vue')
  },
  data () {
    return {
      // 发送网络请求要的数据
      search: {
        start: 0, // 起始索引
        limit: 10, // 个数
        q: '', // 查询关键字
        // distance: '', // 距离筛选条件，desc倒序，asc升序
        // score: '', // 评分筛选条件，desc倒序，asc升序
        scoreRange: '' // 评分范围，比如 0 -1
      },

      baseUrl: process.env.VUE_APP_URL, // 基地址
      companylist: [], // 公司列表的数据
      loading: false, // 加载完成 false
      isLoading: false, // 下拉刷新数据加载完成 true
      skeletonloading: true, // 隐藏骨架结构
      finished: false, // 是否全部加载完毕
      scoreStatus: '', // 评分排序状态
      distanceStatus: '', // 距离排序状态
      commendStatus: true, // 推荐状态
      siftStatus: false, // 谁点击给谁加红色,默认false  点击筛选,默认选中推荐和筛选
      swipeShow: true,
      images: [
        // 轮播图图片
        'http://134.175.59.248/heimamm_mobile/img/ios3x_img_banner@3x.9ed762f2.png',
        'http://134.175.59.248/heimamm_mobile/img/ios3x_img_banner@3x.9ed762f2.png',
        'http://134.175.59.248/heimamm_mobile/img/ios3x_img_banner@3x.9ed762f2.png',
        'http://134.175.59.248/heimamm_mobile/img/ios3x_img_banner@3x.9ed762f2.png',
        'http://134.175.59.248/heimamm_mobile/img/ios3x_img_banner@3x.9ed762f2.png'
      ]
    }
  },
  methods: {
    // 网络请求
    // a.显示骨架 b.发送网络请求 c.赋值给companylist d.判断list长度是否为空 e.隐藏骨架 f.下拉加载完成
    async getData (search) {
      // 显示骨架,在list
      this.skeletonloading = true
      try {
        const res = await apiGetCompanyList(search)
        console.log(res)
        this.companylist = res.data.list
        // 服务器数据为空
        if (res.data.list.length === 0) {
          this.finished = true
        }
      } catch {
        this.$toast.fail('网络正在开小差,请稍后再试')
      }
      // 隐藏骨架结构
      this.skeletonloading = false
      // 下拉刷新数据加载完成
      this.isLoading = false
    },
    // 搜索框搜索
    onSearch () {
      // 恢复到起始位置
      this.search.start = 0
      this.getData(this.search)
    },
    // list列表事件
    async onLoad () {
      try {
        const res = await apiGetCompanyList(this.search)
        this.companylist = [...this.companylist, ...res.data.list]
        // 添加数据
        console.log(res)
        this.search.start += res.data.list.length
        if (res.data.list.length === 0) {
          this.finished = true // 全部加载完毕
        }
      } catch {
        this.$toast.fail('网络正在开小差,请稍后再试')
      }
      // 加载完成
      this.loading = false
      // 显示数据,隐藏骨架
      this.skeletonloading = false
    },
    // 下拉触发
    onRefresh () {
      // 调用数据请求接口
      this.onSearch()
    },
    // 评分
    setScore () {
      // list滑动到顶部
      this.$refs.list.scroller.scrollTop = 145
      // 恢复到起始位置
      this.search.start = 0
      this.commendStatus = false
      this.distanceStatus = ''
      // 点击了默认是asc 再点击然后是desc 相互切换
      if (this.scoreStatus === '') {
        this.scoreStatus = 'asc'
      } else if (this.scoreStatus === 'asc') {
        this.scoreStatus = 'desc'
      } else {
        this.scoreStatus = 'asc'
      }
      this.getData({ ...this.search, score: this.scoreStatus })
    },
    // 距离
    setDistance () {
      // list滑动到顶部
      this.$refs.list.scroller.scrollTop = 145
      // 恢复到起始位置
      this.search.start = 0
      // 推荐状态为false
      this.commendStatus = false
      // 评分状态为空
      this.scoreStatus = ''
      if (this.distanceStatus === '') {
        this.distanceStatus = 'asc'
      } else if (this.distanceStatus === 'asc') {
        this.distanceStatus = 'desc'
      } else {
        this.distanceStatus = 'asc'
      }
      this.getData({ ...this.search, distance: this.distanceStatus })
    },
    // 推荐 粘性布局回复到距离顶部145 点击自身为true, 之前选中的距离和评分都为空,恢复到起始索引,调用网络
    commend () {
      // list滑动到顶部
      this.$refs.list.scroller.scrollTop = 145
      // 恢复到初始值
      this.commendStatus = true
      this.scoreStatus = ''
      this.distanceStatus = ''
      this.onSearch() // 加载全部
    },
    // 筛选弹出框 距离顶部145 打开弹窗  推荐和筛选变红
    setFilter () {
      // list滑动到顶部
      this.$refs.list.scroller.scrollTop = 145
      this.$refs.sift.show = true
      this.siftStatus = true
    },
    // 弹框距离  推荐为false this等于传过来的参数
    selectDistance (distance) {
      this.commendStatus = false
      this.distanceStatus = distance
      // 恢复到起始位置
      this.search.start = 0
      this.scoreStatus = ''
      this.getData({ ...this.search, distance })
    },
    // 弹框评分 起始索引为0  距离的筛选网络请求  评分  推荐
    selectScore () {
      this.search.start = 0
      if (this.distanceStatus) {
        this.getData({ ...this.search, distance: this.distanceStatus })
      } else if (this.scoreStatus) {
        this.getData({ ...this.search, score: this.scoreStatus })
      } else {
        this.onSearch()
      }
    },
    // 清除的弹框 传过来三个参数,分别分别赋值给this  ,默认推荐 执行搜索的方法
    reset ({ scoreStatus, distanceStatus, scoreRange }) {
      this.scoreStatus = scoreStatus
      this.distanceStatus = distanceStatus
      this.search.scoreRange = scoreRange
      this.commendStatus = true
      this.onSearch()
    },
    // 点击文章内容,跳转到文章详情,携带文章id
    enterCompanyDetail (item) {
      console.log(item.id)
      this.$router.push(`/company/detail?id=${item.id}`)
    }
  }
}
</script>

<style lang="less" scoped>
#compony {
  .swipe {
    margin-top: 54px;
    height: 140px;
    img {
      border-radius: 22px;
      box-sizing: border-box;
      padding: 10px 15px 0;
      width: 100%;
    }
  }
  .sticky {
    position: absolute;
    width: 100%;
    top: 54px;
    left: 0;
  }
  .search {
    position: fixed;
    width: 100%;
    z-index: 999;
  }
  .template {
    padding: 10px 15px;
    /deep/ .van-cell__value {
      display: flex;
      .commend {
        margin-right: 40px;
      }
      .distance {
        margin-right: 40px;
        display: flex;
      }
      .star {
        margin-right: 40px;
        display: flex;
      }
      .filter {
        display: inline-block;
        text-align: right;
        flex: 1;
      }
      .arrow {
        display: flex;
        flex-direction: column;
        color: #b4b4bc;
        i {
          font-size: 15px;
          line-height: 12px;
        }
        .rotate {
          transform: rotateX(180deg);
        }
      }
    }
    .active {
      color: #ca0131;
    }
  }
  /deep/ .van-cell__title {
    position: relative;
    display: flex;
    .icon {
      width: 66px;
      height: 66px;
      margin-right: 15px;
      .avatar {
        width: 100%;
        height: 100%;
      }
    }
    .content {
      h3 {
        font-size: 18px;
        font-weight: 400;
        margin-bottom: 5px;
        color: #19232b;
      }
      .address {
        color: #19232b;
        font-size: 12px;
        margin-bottom: 5px;
      }
      .people {
        color: #b4b4bd;
        font-size: 12px;
        margin-bottom: 5px;
        span {
          border-radius: 5px;
          padding: 3px 5px;
          background: #f7f4f5;
          margin-right: 7px;
        }
      }
      .job {
        color: #b4b4bd;
        font-size: 12px;
      }
    }
    .score {
      position: absolute;
      top: 0;
      right: 0;
      color: #545671;
      font-size: 12px;
    }
  }
  .list {
    padding-bottom: 50px;
  }
}
</style>
